<template><!-- :style="{'background':this.bgColor}"-->
  <div class="nav_bar">
    <div class="nav_bar_left">
      <slot name="nav_bar_left"></slot>
    </div>
    <div class="nav_bar_center">
      <slot name="nav_bar_center"></slot>
    </div>
    <div class="nav_bar_right">
      <slot name="nav_bar_right"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "NavBar",
    props: {
      bgColor: {
        type: String,
        default: '#000'
      }
    }
  }
</script>

<style scoped lang="less">
  .nav_bar {
    // 颜色由用户决定
    /*background: #ff5777;*/
    // 常用就是44px
    height: 44px;
    line-height: 44px;
    text-align: center;
    display: flex;
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    z-index: 6;

    box-shadow: 0 1px 1px rgba(100, 100, 100, 0.2);
    .nav_bar_left, .nav_bar_right {
      width: 60px;
    }
    .nav_bar_center {
      flex: 1;
    }
  }
</style>
